<!DOCTYPE html>
<html>
  <head>
    <title>El pozo de la suerte - Bienvenido</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/styles.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- El pozo de la suerte's logo goes here 
    <div class="container">
      <img class = "featuredImg img-responsive" src="images/dummy-logo.gif" style="margin-bottom: 0px;">
      The logo is gonna be here :P!
    </div> -->
    <!-- Top navigation bar -->
    <div class="navbar navbar-inverse navbar-static-top" role = "navigation"  >
      <div class="container">

        <a href="#" class="navbar-brand"> El logo va a ir aquí! </a> 
        <button class = "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class = "collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#login" data-toggle="modal"> <span class="glyphicon glyphicon-globe"></span> Inicia Sesión </a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- The real body of the page -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-body" style="padding-top:0;">
              <div class="page-header" style="margin-top:0;">
                <h2> Catálogo de Productos </h2>
              </div>
              <!--
              <img class = "featuredImg" src="images/ferreteriaBanner.jpg" width="100%" style="margin-bottom: 15px;">
              -->
              <div class="row">
				  <div class="col-sm-6 col-md-3">
				    <div class="thumbnail">
				      <img src="images/dummy.png" alt="...">
				      <div class="caption">
				        <p> 
				        	<strong> Departamento 1 </strong><br>
				        	Descripcion tronca del departamento
				        </p>
				        	<div class="container text-right"><a href="#" class="btn btn-primary ">Ver</a></div>
				      </div>
				    </div>
				  </div>

				  <div class="col-sm-6 col-md-3">
				    <div class="thumbnail">
				      <img src="images/dummy.png" alt="...">
				      <div class="caption">
				        <p> 
				        	<strong> Departamento 2 </strong><br>
				        	Descripcion tronca del departamento
				        </p>
				        	<div class="container text-right"><a href="#" class="btn btn-primary ">Ver</a></div>
				      </div>
				    </div>
				  </div>

				  <div class="col-sm-6 col-md-3">
				    <div class="thumbnail">
				      <img src="images/dummy.png" alt="...">
				      <div class="caption">
				        <p> 
				        	<strong> Departamento 3 </strong><br>
				        	Descripcion tronca del departamento
				        </p>

				        	<div class="container text-right"><a href="#" class="btn btn-primary ">Ver</a></div>

				      </div>
				    </div>
				  </div>

				  <div class="col-sm-6 col-md-3">
				    <div class="thumbnail">
				      <img src="images/dummy.png" alt="...">
				      <div class="caption">
				        <p> 
				        	<strong> Departamento 4 </strong><br>
				        	Descripcion tronca del departamento
				        </p>
				        	<div class="container text-right"><a href="#" class="btn btn-primary ">Ver</a></div>
				      </div>
				    </div>
				  </div>

				</div>
              
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- For the footer -->
    <div class = "navbar navbar-default navbar-static-bottom" >
      <div class = "container">
	      <div class="navbar-text pull-left col-lg-3">
	      	<address>
			  <strong>El Pozo de la Suerte</strong><br>
			  Prol. Isabel la católica #196-B<br>
			  Col. Ejidal, Encarnación de Díaz, Jal.<br>
			  <abbr title="Movil">Cel:</abbr> (123) 456-7890
			</address>

			<address>
			  <strong>Xenosoph Co.</strong><br>
			  <a href="mailto:#">xenosoph@xenosoph.com</a>
			</address>
			</div>

			<!-- Code to display the brands -->
			<div class="container">
				<div class="navbar-text col-lg-8 visible-md visible-lg pull-right">
				
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/alkar.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/black&decker.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/coflex.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/dewalt.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/hilti.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/toolcraft.png">

					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/henkel.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/pretul.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/ridgid.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/stanley.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/starret.png">
					<img class = "featuredImg img-responsive col-lg-3" src="images/brands/truper.png">
				</div>
			</div>
        <!--<p class = "navbar-text pull-left">Site Built by Xenosoph.Co </p>
        <div class="navbar-text pull-right col-lg-2">
        	<button type = "button" class = "navbar-btn btn btn-success pull-right"> Xenosoph.Co </button>
        </div>
        -->
      </div>
    </div>

    <!-- For the page fading to do the login -->
    <div class="modal fade" id="login" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <form class = "form-horizontal">
            <div class="modal-header">
              <h4>Inicia Sesion</h4>
            </div>
            <div class="modal-body text-center">
            <img src="http://i.imgur.com/axskkd0.png">
              <!-- The actual form fields -->
              <div class = "form-group">
                <label for="username" class="col-lg-2 control-label"> Username</label>
                  <div class="col-lg-8">
                    <input type="text" class="form-control" id="username" placeholder="Enter your username here">
                  </div>
              </div>
              <div class = "form-group">
                <label for="password" class="col-lg-2 control-label"> Password </label>
                  <div class="col-lg-8">
                    <input type="password" class="form-control" id="password" placeholder="Enter your password here">
                  </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal"> Cerrar </button> 
              <button type="submit" class="btn btn-primary"> Acceder </button>
            </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--<script src="//code.jquery.com/jquery.js"></script>-->
    <!-- Include all compiled plugins (below), or include individual files as needed
    <script src="js/bootstrap.min.js"></script> -->
    <script src="js/bootstrap.js"></script>
  </body>
</html>